<template>
    <div class="play-list-box" v-show="listData.length !== 0">
        <div class="base bg-white">
            <div class="w-full mx-16 mt-16">
                <div>
                    <div class="pl-t">
                        <p class="text-3xl">{{currenCategory}}</p>
                        <div class="ml-12">
                            <n-popover trigger="click"
                                       :style="{ border: '1px solid #999999', boxShadow: '0 20px 40px #888'}"
                                       placement="bottom">
                                <template #trigger>
                                    <n-button>选择分类</n-button>
                                </template>
                                <div>
                                    <div class="flex justify-center items-center">
                                        <n-button @click="changeCategory('全部')">全部</n-button>
                                    </div>
                                    <div class="flex">
                                        <div class="border-r border-gray-400 flex justify-center items-center">
                                            <n-icon size="20">
                                                <svg t="1628914596962" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg" p-id="2075" width="200"
                                                     height="200">
                                                    <path
                                                        d="M512 0.128C229.312 0.128 0.16 229.12 0.16 511.584c0 260.928 195.52 476.224 448.16 507.52 14.24 3.008 31.584 4.768 52.256 4.768 5.792 0 11.392-0.32 16.8-0.864 280.192-2.88 506.464-230.72 506.464-511.424C1023.84 229.12 794.688 0.128 512 0.128zM431.296 973.44C211.04 934.976 43.584 742.944 43.584 511.808c0-33.12 3.456-65.472 10.016-96.64 20.256 21.632 68 21.12 79.616-11.232 20.832 12.416 48.832 14.656 48.832 39.488 0 81.888 2.912 169.696 77.344 171.04 2.08 0 41.472 14.944 60.224 63.552 6.496 16.832 32.128 0 60.256 0 14.048 0 0 23.68 0 74.816 0 50.944 109.856 129.408 109.856 129.408-0.512 33.728 0.864 60.992 3.68 82.784-24.8-0.48-45.696 2.816-62.08 8.416z m196.768-7.296c-2.432-11.904-13.088-18.432-32.48-13.312 15.488-65.952 23.008-102.88 55.36-130.944 46.72-40.544 5.536-85.632-30.048-80.32-28.064 4.256-10.336-34.72-35.36-36.896-25.056-2.08-57.728-51.872-93.76-69.024-19.104-9.056-37.888-33.376-67.36-34.464-26.112-1.024-64.256 22.08-64.256 4.256 0-57.312-5.824-98.24-7.008-114.56-0.96-13.12-8.576-4.416 26.72-3.584 19.2 0.512 9.824-38.592 28.864-40.096 18.656-1.472 63.168 17.472 74.496 9.92 10.56-7.04 77.44 175.584 77.44 30.176 0-17.248-8.96-47.232 0-63.584 35.328-64.544 68.384-117.184 65.44-124.896-1.696-4.32-36.16-7.904-63.744 1.344-9.28 3.136 2.976 17.696-10.4 20.8-50.08 11.584-94.336-13.504-78.848-37.056 15.872-24.128 73.376-10.528 78.4-58.976 2.88-27.744 5.312-59.872 6.912-83.744 67.424 10.528 60-87.488-40.224-97.984 202.752 2.368 374.56 133.312 437.6 315.04a19.104 19.104 0 0 0-11.2-5.12c-30.272-75.68-103.84-20.896-78.88 45.856-133.664 102.784-99.456 174.464-55.552 215.488 23.136 21.568 45.152 54.016 59.52 77.312-15.616 45.536 57.504 27.328 93.6-49.952a469.696 469.696 0 0 1-335.232 324.32z m312.96-546.624a439.904 439.904 0 0 1 9.632 99.296 501.728 501.728 0 0 0-9.984-74.752c0.448-8.672 0.576-16.896 0.352-24.544z"
                                                        p-id="2076" fill="#707070"></path>
                                                </svg>
                                            </n-icon>
                                            <p class="font-semibold mx-2">语种</p>
                                        </div>
                                        <div class="flex text-xs flex items-center justify-center">
                                            <div class="grid grid-cols-8 gap-2">
                                                <p class="p-2 hover:underline cursor-pointer"
                                                   v-for="(item, index) in titleArr.languagesArr" :key="index"
                                                   @click="changeCategory(item)">
                                                    {{ item }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex mt-3">
                                        <div class="border-r border-gray-400 flex justify-center items-center">
                                            <n-icon size="20">
                                                <svg t="1628921086901" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg" p-id="3608" width="200"
                                                     height="200">
                                                    <path
                                                        d="M544 768h288a32 32 0 0 1 32 32v96h32V128H128v768h32v-96a32 32 0 0 1 32-32h64v-149.536C203.008 593.312 176 546.24 176 480c0-68.48 49.248-167.008 147.2-297.6l13.824-18.4 12.448 19.36C447.36 335.744 496 432.896 496 480c0 48.96-24.96 86.368-72.832 110.304a16 16 0 0 1-14.336-28.608c37.44-18.72 55.168-45.312 55.168-81.696 0-36.48-43.2-124.608-128.96-259.808C250.176 336.32 208 423.488 208 480c0 57.664 22.912 94.336 69.952 113.152L288 597.12V768h224V411.456l144-233.792 144 233.792V448h-144a16 16 0 1 1 0-32h109.216L656 238.688 544 420.544V768zM128 96h768a32 32 0 0 1 32 32v768a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32V128a32 32 0 0 1 32-32z m64 704v96h640v-96H192z m576-320h32v288h-32v-288z m-128 0h32v288h-32v-288z m-256 160h32v128h-32v-128z"
                                                        p-id="3609" fill="#707070"></path>
                                                </svg>
                                            </n-icon>
                                            <p class="font-semibold mx-2">风格</p>
                                        </div>
                                        <div class="flex text-xs flex items-center justify-center">
                                            <div class="grid grid-cols-8 gap-2">
                                                <p class="p-2 hover:underline cursor-pointer"
                                                   v-for="(item, index) in titleArr.styleArr" :key="index"
                                                   @click="changeCategory(item)">
                                                    {{ item }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex mt-3">
                                        <div class="border-r border-gray-400 flex justify-center items-center">
                                            <n-icon size="20">
                                                <svg t="1628921140727" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg" p-id="6845" width="200"
                                                     height="200">
                                                    <path
                                                        d="M548.335484 698.632258c-14.864516 3.303226-31.380645 4.954839-47.896774 4.954839-9.909677 0-16.516129 6.606452-16.516129 16.516129s6.606452 16.516129 16.516129 16.516129c18.167742 0 37.987097-1.651613 56.154838-6.606452 8.258065-1.651613 14.864516-11.56129 11.561291-19.819355-1.651613-8.258065-9.909677-13.212903-19.819355-11.56129zM723.406452 454.193548c-9.909677 0-16.516129 6.606452-16.516129 16.516129v26.425807c0 77.625806-42.941935 148.645161-112.309678 183.329032-8.258065 4.954839-11.56129 14.864516-6.606451 21.470968 3.303226 4.954839 8.258065 8.258065 14.864516 8.258064 3.303226 0 4.954839 0 8.258064-1.651613 79.277419-41.290323 130.477419-122.219355 130.47742-213.058064v-26.425806c-1.651613-6.606452-8.258065-14.864516-18.167742-14.864517z"
                                                        fill="#707070" p-id="6846"></path>
                                                    <path
                                                        d="M848.929032 396.387097h-9.909677v-56.154839c0-36.335484-29.729032-66.064516-66.064516-66.064516h-545.032258c-36.335484 0-66.064516 29.729032-66.064516 66.064516v156.903226c0 186.632258 151.948387 338.580645 338.580645 338.580645 145.341935 0 269.212903-92.490323 317.109677-222.967742h31.380645c59.458065 0 109.006452-49.548387 109.006452-109.006452 0-57.806452-47.896774-107.354839-109.006452-107.354838zM500.43871 771.303226c-150.296774 0-272.516129-122.219355-272.516129-272.516129v-156.903226h545.032258V497.135484c0 151.948387-122.219355 274.167742-272.516129 274.167742z m348.490322-222.967742h-9.909677V462.451613h9.909677c23.122581 0 42.941935 19.819355 42.941936 42.941935s-19.819355 42.941935-42.941936 42.941936zM715.148387 872.051613h-429.419355c-18.167742 0-33.032258 14.864516-33.032258 33.032258s14.864516 33.032258 33.032258 33.032258h429.419355c18.167742 0 33.032258-14.864516 33.032258-33.032258s-14.864516-33.032258-33.032258-33.032258zM437.677419 254.348387c18.167742 0 33.032258-14.864516 33.032258-33.032258v-132.129032c0-18.167742-14.864516-33.032258-33.032258-33.032258s-33.032258 14.864516-33.032258 33.032258v132.129032c0 18.167742 14.864516 33.032258 33.032258 33.032258zM564.851613 254.348387c18.167742 0 33.032258-14.864516 33.032258-33.032258V143.690323c0-18.167742-14.864516-33.032258-33.032258-33.032258s-33.032258 14.864516-33.032258 33.032258v79.277419c0 16.516129 14.864516 31.380645 33.032258 31.380645z"
                                                        fill="#707070" p-id="6847"></path>
                                                </svg>
                                            </n-icon>
                                            <p class="font-semibold mx-2">场景</p>
                                        </div>
                                        <div class="flex text-xs flex items-center justify-center">
                                            <div class="grid grid-cols-8 gap-2">
                                                <p class="p-2 hover:underline cursor-pointer"
                                                   v-for="(item, index) in titleArr.sceneArr" :key="index"
                                                   @click="changeCategory(item)">
                                                    {{ item }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex mt-3">
                                        <div class="border-r border-gray-400 flex justify-center items-center">
                                            <n-icon size="20">
                                                <svg t="1628921174086" class="icon" viewBox="0 0 1026 1024"
                                                     version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg" p-id="7983" width="200"
                                                     height="200">
                                                    <path
                                                        d="M495.465 830.665c-187.138 0-264.948-168.222-268.193-175.401l62.966-28.307c2.486 5.49 62.207 134.667 205.194 134.667 153.067-1.795 211.302-129.213 213.685-134.633l63.103 27.996c-3.141 7.077-79.054 173.364-273.13 175.643l-3.625 0.034zM500.16 991.221c-256.974 0-466.034-209.060-466.034-466.034s209.060-466.034 466.034-466.034 466.034 209.060 466.034 466.034-209.060 466.034-466.034 466.034zM500.16 128.196c-218.897 0-396.991 178.094-396.991 396.991s178.094 396.991 396.991 396.991 396.991-178.094 396.991-396.991-178.059-396.991-396.991-396.991zM311.088 444.27c0 29.689 24.062 53.818 53.818 53.818s53.818-24.096 53.818-53.818-24.062-53.818-53.818-53.818-53.818 24.096-53.818 53.818zM580.765 444.27c0 29.689 24.062 53.818 53.818 53.818s53.818-24.096 53.818-53.818-24.062-53.818-53.818-53.818-53.818 24.096-53.818 53.818z"
                                                        p-id="7984" fill="#707070"></path>
                                                </svg>
                                            </n-icon>
                                            <p class="font-semibold mx-2">情感</p>
                                        </div>
                                        <div class="flex text-xs flex items-center justify-center">
                                            <div class="grid grid-cols-8 gap-2">
                                                <p class="p-2 hover:underline cursor-pointer"
                                                   v-for="(item, index) in titleArr.emotionalArr" :key="index" @click="changeCategory(item)">
                                                    {{ item }}</p>
                                            
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex mt-3">
                                        <div class="border-r border-gray-400 flex justify-center items-center">
                                            <n-icon size="20">
                                                <svg t="1628921203124" class="icon" viewBox="0 0 1024 1024"
                                                     version="1.1"
                                                     xmlns="http://www.w3.org/2000/svg" p-id="9737" width="200"
                                                     height="200">
                                                    <path
                                                        d="M179.2 1024C81.454545 1024 0 944.872727 0 844.8s79.127273-179.2 179.2-179.2c39.563636 0 76.8 13.963636 109.381818 37.236364l9.309091 6.981818V134.981818c0-34.909091 27.927273-62.836364 60.509091-62.836363l598.109091-69.818182h4.654545C993.745455 0 1024 27.927273 1024 62.836364v672.581818c0 48.872727-18.618182 93.090909-53.527273 125.672727-32.581818 32.581818-79.127273 51.2-125.672727 51.2-97.745455 0-179.2-79.127273-179.2-179.2 0-97.745455 79.127273-179.2 179.2-179.2 39.563636 0 79.127273 13.963636 109.381818 37.236364l9.309091 6.981818V286.254545l-605.090909 65.163637v493.381818c-2.327273 100.072727-81.454545 179.2-179.2 179.2z m0-295.563636c-65.163636 0-118.690909 53.527273-118.690909 118.690909s53.527273 118.690909 118.690909 118.690909 118.690909-53.527273 118.690909-118.690909c-2.327273-67.490909-53.527273-118.690909-118.690909-118.690909z m665.6-111.709091c-65.163636 0-118.690909 53.527273-118.690909 118.690909s53.527273 118.690909 118.690909 118.690909 118.690909-53.527273 118.690909-118.690909-53.527273-118.690909-118.690909-118.690909z m-488.727273-325.818182l605.090909-65.163636V60.509091l-598.109091 69.818182h-6.981818v160.581818z"
                                                        p-id="9738" fill="#707070"></path>
                                                </svg>
                                            </n-icon>
                                            <p class="font-semibold mx-2">主题</p>
                                        </div>
                                        <div class="flex text-xs flex items-center justify-center">
                                            <div class="grid grid-cols-8 gap-2">
                                                <p class="p-2 hover:underline cursor-pointer"
                                                   v-for="(item, index) in titleArr.themeArr" :key="index"
                                                   @click="changeCategory(item)">
                                                    {{ item }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </n-popover>
                        </div>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="grid grid-cols-5 gap-y-8 gap-x-20">
                        <song-shot-information-cart v-for="(item, index) in listData" :detail="item"
                                                    :key="index" @click="getListDetail(item.id)"></song-shot-information-cart>
                    </div>
                </div>
                <div class="flex items-center justify-center my-4">
                    <n-pagination v-model:page="page" :page-count="pageCount" :on-update:page="OnPageUpdate" show-quick-jumper/>
                </div>
            </div>
        </div>
        <n-modal v-model:show="isLoadDing">
            <n-card style="width: 200px;" :bordered="false" size="huge">
                <div class="flex items-center justify-center">
                    <n-spin size="large" />
                </div>
            </n-card>
        </n-modal>
    </div>
</template>

<script>
import {NPopover, NButton, NIcon, NPagination, useNotification, NModal, NSpin, NCard} from 'naive-ui';
import {onMounted, reactive, toRefs, watchEffect} from "vue";
import {getPlayListCatList, getTopPlayList} from "@/network/song/song-list";
import SongShotInformationCart from "@/components/song/SongShotInformationCart";
import {calInteger} from "@/util/cal";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
export default {
    name: "PlayList",
    props: {
        category: {
            type: String,
            default: '全部'
        }
    },
    setup(props) {
        const TAG = "PlayList.vue";
        const router = useRouter();
        const route = useRoute();
        const store = useStore();
        const playListInfo = reactive({
            // 分类
            category: {},
            // 标题展开框内容
            titleArr: {
                // 语种数组
                languagesArr: new Array(),
                // 风格数组
                styleArr: new Array(),
                // 场景数组
                sceneArr: new Array(),
                // 情感数组
                emotionalArr: new Array(),
                // 主题数组
                themeArr: new Array()
            },
            currenCategory: props.category,
            // 歌单总列表数据
            listData: [],
            page: 1,
            pageCount: 1,
            pageLimit: 50,
            isLoadDing: false
        })
        // 显示加载遮罩
        const beLoading = () => {
            store.commit('setLoading', true);
        }
        // 格式化选择分类中的sub数组
        const formatSubArr = (sub) => {
            for (let i = 0; i < sub.length; i++) {
                let name = sub[i].name;
                let category = sub[i].category;
                switch (category) {
                    case 0:
                        playListInfo.titleArr.languagesArr.push(name);
                        break;
                    case 1:
                        playListInfo.titleArr.styleArr.push(name);
                        break;
                    case 2:
                        playListInfo.titleArr.sceneArr.push(name);
                        break;
                    case 3:
                        playListInfo.titleArr.emotionalArr.push(name);
                        break;
                    case 4:
                        playListInfo.titleArr.themeArr.push(name);
                        break;
                }
            }
        }
        const init = () => {
            beLoading();
            getPlayListCatList().then(res => {
                playListInfo.category = res.data.categories;
                formatSubArr(res.data.sub);
            })
            if (typeof (route.query.category) !== 'undefined') {
                playListInfo.currenCategory = route.query.category;
                refreshList(50, 50, 'hot');
            }
        }
        // 刷新数据
        const refreshList = (limit, offset, order) => {
            getTopPlayList(playListInfo.currenCategory, limit, offset, order).then(res => {
                playListInfo.pageCount  = calInteger(res.data.total / playListInfo.pageLimit);
                playListInfo.listData = res.data.playlists;
            })
            window.scrollTo(0, 0);
            beLoading();
        }
        // 切换分类
        const changeCategory = (cat) => {
            playListInfo.currenCategory = cat;
            refreshList(50, 50, 'hot')
        }
        // 分页操作函数
        const OnPageUpdate = (pageIdx) => {
            playListInfo.page = pageIdx;
            refreshList(50, pageIdx * playListInfo.pageLimit, 'hot');
        }
        onMounted(() => {
            init();
            refreshList(50, 1, 'hot');
            watchEffect(() => {
                let pageIdx = playListInfo.page;
                // 监听porps中category， 实现从首页跳转到歌单的效果
                let propsCat = props.category;
                refreshList(50, pageIdx * playListInfo.pageLimit, 'hot');
            })
        })
        // 通知组件
        const notification = useNotification();
        // 根据ＩＤ获取歌单详情
        const getListDetail = (id) => {
            if (id === 0) {
                notification['error']({
                    content: '获取到的用户id错误',
                    meta: '切勿重复点击'
                })
                return;
            } else {
                router.push({path: '/playlist', query: {id}});
            }
        }
        return {
            ...toRefs(playListInfo),
            changeCategory,
            OnPageUpdate,
            getListDetail
        }
    },
    components: {
        NPopover,
        NButton,
        NIcon,
        SongShotInformationCart,
        NPagination,
        NModal,
        NSpin,
        NCard
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';

.play-list-box {
    width: $client-width;
    background: #f4f4f4;
    
    min-height: $client-height;
    .pl-t {
        @apply flex;
        border-bottom: 2px solid #c20c0c;
    }
}

</style>